<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        textarea{
            width: 800px;
            resize: none;
            margin: 0px auto;
            display: block;
            outline: none;
        }
        ul{
            width: 800px;
            margin: 0px auto;
        }
        li{
            margin: 20px 0px;
            border: 1px solid red;
            padding: 20px;
            width: 800px;
            position: relative;
            
        }
        .del{
            position: absolute;
            right: -10px;
            top: -10px;
            cursor: pointer;

        }
        button{
            top: 20px;
            width: 800px;
            line-height: 50px;
            background: pink;
            margin: auto;
            display: block;
            cursor: pointer;
        }
        </style>
    </head>
    <body>
        <textarea name="" id="txt" cols="30" rows="10"></textarea>
        <button id="bth">发送</button>
        <ui id="box">
            <li>
                啦啦啦啦啦
            <p>2021-05-31</p>
            <span class="del" onclick="del(this)">x</span>
            </li>
        
        
        
            <li>
                sb
            <p>2021-06-01</p>
            <span class="del" onclick="del(this)">x</span>
            </li>
        </ui>

        <script>
            var bth=document.getElementById('bth');
            var txt=document.getElementById('txt');
            var box=document.getElementById('box');
            //获取日期
            var year=new Date().getFullYear()
            //只会显示0到11月，所以要+1
            var month=new Date().getMonth()+1
            var date=new Date().getDate()
            //绑定点击事件
            bth.onclick=function(){
                var val=txt.value;
                var tag=document.createElement('li');
                tag.innerHTML=`${val}
                <p>${year}-${month}-${date}</p>
                <span class="del" onclick="del(this)">x</span>`;
                box.appendChild(tag);
            }
            function del(a){
                //a.parentNode.removeChild(a)删除a标签
                a.parentNode.parentNode.removeChild(a.parentNode)
            }


        </script>
    </body>
</html>